<template>
	<view class="groupManage">
		<view class="groupMember flex flexWrap">
			<view class="groupOne" v-for="(item,index) in member" :key="index">
				<view class="imgBox">
					<image :src="item.createUserAvatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode="widthFix"></image>
				</view>
				<view class="font12 color666 hiddenOneline">{{item.createUserName || '匿名用户'}}</view>
			</view>
			<!-- <view class="groupOne">
				<view class="addNew font18 color666">+</view>
			</view> -->
			<!-- <view class="groupOne">
				<view class="addNew font12 color666" @click="allMember">全部</view>
			</view> -->
		</view>
		<view class="info" v-if="isOwner">
			<uni-mdlist :listData="itemArr" @clickItem="clickItem" @clickImg="imageClick"></uni-mdlist>
		</view>
		<view class="groupOper">
			<uni-mdlist :listData="itemArr2" @clickItem="clickItem"></uni-mdlist>
		</view>
		<!-- <view class="font16 del" v-if="(actInfo && actInfo.loginTeamUserVO.userState==1)">删除并退出</view> -->
	</view>
</template>

<script>
	import { actDetail,activityMember,editActivityInfo } from "@/api/send.js"
	import { chooseImg,uploadFile } from "@/utils/common.js" 
	export default {
		data() {
			return {
				member:[],
				itemArr:[{
					title:'活动头像',
					icon:'',
					subTitle:'',
					val:'',
					rightType:'image'
				},{
					title:'活动背景',
					icon:'',
					subTitle:'',
					val:'',
					rightType:'image'
				},{
					title:'名称',
					icon:'',
					subTitle:'',
					val:''
				},{
					title:'简介',
					icon:'',
					subTitle:'',
					val:''
				},
				// {
				// 	title:'二维码',
				// 	icon:'',
				// 	subTitle:'',
				// 	val:''
				// },
				],
				itemArr2:[{
					title:'收费模式',
					icon:'',
					subTitle:'',
					val:'',
					rightType:'none'
				},{
					title:'打卡模式',
					icon:'',
					subTitle:'',
					val:'',
					rightType:'none'
				},{
					title:'所属分区',
					icon:'',
					subTitle:'',
					val:'',
					rightType:'none'
				}],
				activityId:'',
				actInfo:'',
				isOwner:false,
				// 选择的修改的哪一类图片（头像、背景）
				chooseItem:''
			};
		},
		onLoad(option) {
			this.activityId=option.id?option.id:''
			uni.removeStorageSync('cropUrl')
		},
		onShow() {
			this.getDetail()
			if(uni.getStorageSync('cropUrl')){
				let path=[uni.getStorageSync('cropUrl')]
				uni.removeStorageSync('cropUrl')
				uploadFile(path).then((fileSucc)=>{
					let param={
						id:this.activityId
					}
					if(this.chooseItem.item.title.indexOf("头像")!=-1){
						param.logo=fileSucc.url
					}else if(this.chooseItem.item.title.indexOf("背景")!=-1){
						param.cover=fileSucc.url
					}
					this.editDetailApi(param,this.chooseItem,fileSucc.url)
				})
			}
		},
		onUnload() {
			uni.removeStorageSync('cropUrl')
		},
		methods:{
			// 详情
			getDetail(){
				actDetail({id:this.activityId}).then((res)=>{
					if(res.code==100000){
						this.isOwner=(uni.getStorageSync('userId')==res.data.createUserId)
						this.actInfo=res.data
						this.getMembers()
						this.itemArr.forEach((item)=>{
							let title=item.title
							if(title.indexOf('头像')!=-1){
								item.val=this.actInfo.logo
								return
							}else if(title.indexOf('背景')!=-1){
								item.val=this.actInfo.cover
								return
							}else if(title.indexOf('名称')!=-1){
								item.val=this.actInfo.name
								return
							}else if(title.indexOf('简介')!=-1){
								item.val=this.actInfo.introduction
								return
							}
						})
						this.itemArr2.forEach((item)=>{
							let title=item.title
							if(title.indexOf('收费模式')!=-1){
								let mode=this.actInfo.charge==0?'免费':'收费'
								if(this.actInfo.charge==1 && this.actInfo.chargeCount>0){
									mode+=this.actInfo.amount+'-'+(this.actInfo.chargeCount+'人团'+this.actInfo.chargeDiscount+"折")
								}
								item.val=mode
								return
							}else if(title.indexOf('打卡模式')!=-1){
								item.val=(this.actInfo.taskType==0?'当天事当天毕':(this.actInfo.taskType==1?`在${this.actInfo.taskEndTime}前打卡`:(this.actInfo.taskType==2?'上一个任务完成才能进行下一个任务':'不限')))
								return
							}else if(title.indexOf('分区')!=-1){
								item.val=`(${this.actInfo.subjectCode})${this.actInfo.subjectName}`
								return
							}
						})
					}
				})
			},
			// 获取小组成员
			getMembers(){
				let param={
					page:1,
					size:17,
					activityId:this.activityId,
				}
				activityMember(param).then((res)=>{
					if(res.code==100000){
						this.member=res.data.rows
					}
				})
			},
			// // 全部成员
			// allMember(){
			// 	let query={
			// 		id:this.activityId,
			// 		type:'see',
			// 		preIdentity:this.actInfo.loginTeamUserVO
			// 	}
			// 	uni.navigateTo({
			// 		url:'/pages/send/group/allMember/allMember?query='+JSON.stringify(query)
			// 	})
			// },
			//每一项的点击事件
			clickItem(item){
				if(item.rightType=='none')return
				let title=item.title
				if(title.indexOf('名称')!=-1){
					let query={
						name:this.actInfo.name,
						id:this.actInfo.id,
						from:'activity'
					}
					uni.navigateTo({
						url:'/pages/send/group/editTitle/editTitle?query='+JSON.stringify(query)
					})
					return
				}else if(title.indexOf('简介')!=-1){
					let query={
						intro:this.actInfo.introduction,
						id:this.actInfo.id,
						from:'activity'
					}
					uni.navigateTo({
						url:'/pages/send/group/editIntro/editIntro?query='+JSON.stringify(query)
					})
					return
				}else if(title.indexOf('收费模式')!=-1){
					let query={
						id:this.activityId,
						form:{
							amount:this.actInfo.amount,
							charge:this.actInfo.charge.toString(),
							chargeCount:this.actInfo.chargeCount,
							chargeDiscount:this.actInfo.chargeDiscount,
						},
						from:'activity'
					}
					uni.navigateTo({
						url:'/pages/send/group/editChargeMode/editChargeMode?query='+JSON.stringify(query)
					})
					return
				}
			},
			// 更换图片操作（头像、背景）
			imageClick(obj){
				this.chooseItem=obj
				chooseImg(1).then((res)=>{
					if(obj.item.title.indexOf("头像")!=-1){
						uni.navigateTo({
							url:'/settingPages/pages/fullScreenCrop/fullScreenCrop?url='+res[0]
						})
						return
					}else{
						uni.navigateTo({
							url:'/settingPages/pages/fullScreenCrop/fullScreenCrop?url='+res[0]+'&ratio=4/3'
						})
						return
					}
				})
			},
			// 更改小组信息
			editDetailApi(param,obj,url){
				uni.showLoading({
					title:'提交中',
					mask:true
				})
				editActivityInfo(param).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						uni.showToast({
							icon:'none',
							title:'修改成功'
						})
						if(obj.item.rightType=='image'){
							this.itemArr.forEach((item)=>{
								if(item.title==obj.item.title){
									item.value=url
								}
							})
							this.getDetail()
							return
						}else if(obj.item.rightType=='switch'){
							this.itemArr2.forEach((item)=>{
								if(item.title==obj.item.title){
									item.val=obj.value
								}
							})
							this.getDetail()
							return
						}
					}else{
						if(obj.item.rightType=='switch'){
							this.itemArr2.forEach((item)=>{
								if(item.title==obj.item.title){
									item.val=!obj.value
								}
							})
						}
						this.getDetail()
						return
					}
				}).catch((err)=>{uni.hideLoading()})
			}
		}
	}
</script>
<style lang="scss">
@import "@/static/public.scss";
page{
	background: $pageBgColor;
}
</style>
<style lang="scss" scoped>
@import "@/static/public.scss";
.groupMember,
.info,
.groupOper{
	background: #fff;
	margin-bottom: 20rpx;
}
.groupMember{
	padding: 30rpx 30rpx 0;
	box-sizing: border-box;
}
.groupOne{
	flex:0 0 20%;
	text-align: center;
	margin:0 0 40rpx;
	max-width: 150rpx;
	.imgBox{
		position: relative;
		width: 96rpx;
		height:96rpx;
		margin:0 auto 20rpx;
		.identity{
			position: absolute;
			bottom:0;
			width:100%;
			text-align: center;
			left: 0;
			background: rgba(0, 0, 0, .4);
			border-radius: 10rpx 10rpx 0 0;
			color: #fff;
		}
	}
	image{
		width: 96rpx;
		height:96rpx;
		border-radius: 10rpx;
		display: block;
	}
	.delIcon{
		position: absolute;
		top:0;
		right: 0;
		color:$colorred !important;
	}
}
.addNew{
	border:2px dashed $bordercolor;
	width: 100rpx;
	height: 100rpx;
	text-align: center;
	margin:0 auto;
	line-height: 100rpx;
	border-radius: 10rpx;
}
.del{
	background: $bordercolor;
	text-align: center;
	padding: 24rpx 0;
}
</style>
